<template>
  <!-- 真空炉 -->
  <div style="position: relative">
    <div
      id="equipmentAdminBox"
      :key="mixinBoderKey"
      v-init-screen-h="0"
      class="equipmentAdmin_box"
    >
      <div class="content">
        <div class="content_top flex-x flex-top" style="height: 75%">
          <div style="width: 60%; height: 100%" class="">
            <dv-border-box-12
              style="padding:  10px; height: 100%"
              class="msg_content"
            >
              <div class="flex-x flex-wrap h-full">
                <!-- 算出每一行的高度 -->
                <div
                  class="flex-x flex-wrap"
                  :style="{
                    width: '33%',
                    height: `${100 / Math.ceil(renderJsonDownArea.length / 3)}%`
                  }"
                  v-for="(item, index) in renderJsonDownArea"
                  :key="index"
                >
                  <ContentField
                    :imgUrl="item.imgUrl"
                    :title="item.ch_Text"
                    :content="item.areaName"
                  ></ContentField>
                </div>
              </div>
            </dv-border-box-12>
          </div>

          <!-- 实时曲线图 -->
          <RealTimeChart
            :chartKeys="CHART_KEYS_Z11"
            ref="realChart"
            style="height: 100%; width: 40%"
          />
        </div>
        <!-- 任务号,远程监控 -->
        <div
          class="content_bottom flex-x flex-top"
          style="height: 25%; width: 100%"
        >
          <!-- 任务号 -->
          <SinteringTaskNumber style="width: 60%; height: 100%" />
          <!-- 远程监控 -->
          <RemoteMonitoring
            @handleIssued="mixinHandleIssued"
            manufacture-site="真空热处理"
            style="width: 40%; height: 100%"
          />
        </div>
      </div>
    </div>
    <IssuedDialog
      ref="issuedDialogRef"
      :visible.sync="mixinIssuedShow"
      @editStage="mixinEditStage"
    >
      <template #formula="{row}">
        <el-table
          style="margin-top: 10px"
          :data="row.formulaDownloadZKInfo"
          border
          size="mini"
        >
          <el-table-column
            :prop="item.key"
            show-overflow-tooltip
            :label="item.label"
            align="center"
            v-for="(item, index) in _formulaInfo.filter(f => !f.hide)"
            :key="index"
          >
            <template slot-scope="downscope">
              <span v-if="item.type == 'radio'">
                {{ mixinRadioLable(item, downscope) }}
              </span>
              <span v-else>
                {{ downscope.row[item.key] || "-" }}
              </span>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </IssuedDialog>
    <!-- 编辑配方的弹框 -->
    <Stage
      :stageVisible.sync="mixinStageVisible"
      :isIssued="mixinIsIssued"
      :formulaParameter="mixinStageTable"
      @addFormula="mixinAddFormula"
      @del="mixinDel"
      @submit="mixinSubmit"
      :stageBtnloading="mixinStageBtnloading"
    ></Stage>
  </div>
</template>

<script>
import _ from "lodash";
import { generateId } from "@/utils";
import RealTimeChart from "../components/RealTimeChart.vue";

import SinteringTaskNumber from "../../components/SinteringTaskNumber.vue";
import RemoteMonitoring from "../components/RemoteMonitoring.vue";
import IssuedDialog from "../components/IssuedDialog.vue";
import ContentField from "../../components/ContentField.vue";
import { renderJson } from "../../constant";
import Stage from "./Stage.vue";
import {
  MAP_DEATIL_VACUUM_FURNACE_Z11,
  VACUUM_FORMULA_INFO_Z11,
  CHART_KEYS_Z11
} from "./constant";
import { mapGetters } from "vuex";

import { mixinOpenedKey } from "@/mixin/openedKey.js";
import { mixinFurnaceFormulaInfo } from "../../mixins/mixinFurnaceFormulaInfo";
export default {
  mixins: [mixinFurnaceFormulaInfo, mixinOpenedKey],
  components: {
    IssuedDialog,
    ContentField,
    RemoteMonitoring,
    RealTimeChart,
    SinteringTaskNumber,
    Stage
  },
  data() {
    return {
      brder1Key: generateId()
    };
  },
  watch: {
    // 有bug 晚点改
    "$store.state.app.sidebar.opened"() {
      setTimeout(() => {
        this.brder1Key = generateId();
      }, 300);
    }
  },
  computed: {
    CHART_KEYS_Z11() {
      return CHART_KEYS_Z11;
    },
    _formulaInfo() {
      return VACUUM_FORMULA_INFO_Z11;
    },
    ...mapGetters(["area123", "controlDeviceInfo"]),
    // 获取下一部分
    renderJsonDownArea() {
      if (JSON.stringify(this.controlDeviceInfo) !== "{}") {
        return renderJson(this.area123, MAP_DEATIL_VACUUM_FURNACE_Z11)
          ?.downArea;
      } else {
        return [];
      }
    }
  },
  async mounted() {},
  destroyed() {},
  methods: {}
};
</script>

<style lang="scss" scoped>
.equipmentAdmin_box {
  // background: url(../../../assets/images/applicationCenter/app_bg.jpg) no-repeat
  //   100%;
  background-size: cover;
  color: #fff;
  position: relative;
  width: 100%;
  height: 100%;

  .left {
    width: 16%;
    height: 100%;
  }

  .content {
    height: 100%;
  }

  // .content_bottom {
  // }
}
</style>
